<script setup lang="ts">
import { ref } from "vue"
import {
  PinInput,
  PinInputGroup,
  PinInputSlot,
} from "@/registry/new-york/ui/pin-input"

const value = ref<string[]>([])
</script>

<template>
  <div>
    <PinInput
      id="pin-input"
      v-model="value"
      placeholder="○"
      disabled
    >
      <PinInputGroup>
        <PinInputSlot
          v-for="(id, index) in 5"
          :key="id"
          :index="index"
        />
      </PinInputGroup>
    </PinInput>
  </div>
</template>
